import React from 'react';
import {Table, Dropdown, Button, Menu, Icon, Modal,DatePicker, message,Badge, Row, Col, Radio} from 'antd';
import moment from 'moment';
import EditableCell from '../ui/editablecell';
import {TweenOneGroup} from 'rc-tween-one';
import styles from './revieweffects.less';
import { config } from '../../utils'
const confirm = Modal.confirm;

class list extends React.Component {
  constructor (props) {
    super(props);
   
    this.state={
      data:this.props.dataSource,
      activeMenu:"aqi"
    }
    this.te=null
  }

  handleMenuChange = (e) => {
    const key=e.target.value;
    this.setState({ activeMenu: key});
  };


  

  renderColumns(data, index, key, text) {
    
    if (text<0){
      text = "—"
    }
    return (<span key={key}>{text}</span>)
  }

  renderPrimaryPollutant(data, index, key, text) {

      if(data.aqi<=50||text=='—'||text=='-'){
        return (<span>—</span>)
      }
      const array=text.split(",");
      let str=""
      for(var i=0;i<array.length;i++){
        str+=","+(config.gas[array[i]]==undefined?text:config.gas[array[i]])
      }
      if(str!=""){
          str=str.substring(1)
      }
      if(str==""||str==undefined){
        str="—"
      }
      return (<span>{str}</span>)
  }


  async pageChange(pagination) {
    await this.props.onPageChange(pagination);
    this.newPage = pagination.current
  }

  async handleChange(values,dateString){
    await this.props.onDateChange(dateString)
  }
  tableExport(){
    /* Excel Open XML spreadsheet (.xlsx) */
  
    let te=$("#table table").tableExport({formats:["xlsx","txt"]});
    return te
  }
  componentDidUpdate(){
    if(this.te!=null){
      this.te.reset()
    }else{
       this.te=this.tableExport()
    }
  }
  componentDidMount(){
    window.requestAnimationFrame(function() {
      if(this.te==null){
       this.te=this.tableExport()
      }
    }.bind(this))
  }
  render () {
    const {loading, dataSource, pagination, onPageChange,onDateChange,startTime,endTime} = this.props;
    const {activeMenu}=this.state;
    const { MonthPicker, RangePicker } = DatePicker;
    const dateFormat = 'YYYY-MM-DD';

    let columns = [];
    if (activeMenu=="aqi"){
      columns = [
                {
                  title: '监测时间',
                  dataIndex: 'timepoint',
                  key: 'timepoint',
                  render: (text, record, index) =>{
                    return text.split(" ")[0]
                  }
                },{
                  title: '站点',
                  dataIndex: 'stationName',
                  key: 'stationName'
                },{
                  title:'污染物浓度及空气质量分指数(IAQI)',
                  children: [
                    {
                      title:'二氧化硫(SO2)24小时平均',
                      children:[
                        {
                          title:'浓度/(μg/m³)',
                          dataIndex: 'so2',
                          key: 'so2',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'so2', text),
                        },
                        {
                          title: '分指数',
                          dataIndex: 'iso2',
                          key: 'iso2',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'iso2', text),
                        }
                      ]
                    },
                    {
                      title:'二氧化氮(NO2)24小时平均',
                      children:[
                        {
                          title:'浓度/(μg/m³)',
                          dataIndex: 'no2',
                          key: 'no2',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'no2', text),
                        },
                        {
                          title: '分指数',
                          dataIndex: 'ino2',
                          key: 'ino2',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'ino2', text),
                        }
                      ]
                    },
                    {
                      title:'颗粒物(粒径小于等于10μm)24小时平均',
                      children:[
                        {
                          title:'浓度/(μg/m³)',
                          dataIndex: 'pm10',
                          key: 'pm10',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'pm10', text),
                        },
                        {
                          title: '分指数',
                          dataIndex: 'ipm10',
                          key: 'ipm10',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'ipm10', text),
                        }
                      ]
                    },
                    {
                      title:'一氧化碳(CO)24小时平均',
                      children:[
                        {
                          title:'浓度/(㎎/m³)',
                          dataIndex: 'co',
                          key: 'co',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'co', text),
                        },
                        {
                          title: '分指数',
                          dataIndex: 'ico',
                          key: 'ico',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'ico', text),
                        }
                      ]
                    },
                    {
                      title:'臭氧(O3)最大8小时滑动平均',
                      children:[
                        {
                          title:'浓度/(μg/m³)',
                          dataIndex: 'o3',
                          key: 'o3',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'o3', text),
                        },
                        {
                          title: '分指数',
                          dataIndex: 'io3',
                          key: 'io3',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'io3', text),
                        }
                      ]
                    },
                    {
                      title:'颗粒物(粒径小于等于2.5μm)24小时平均',
                      children:[
                        {
                          title:'浓度/(μg/m³)',
                          dataIndex: 'pm25',
                          key: 'pm25',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'pm25', text),
                        },
                        {
                          title: '分指数',
                          dataIndex: 'ipm25',
                          key: 'ipm25',
                          render: (text, record, index) => this.renderColumns(dataSource, index, 'ipm25', text),
                        }
                      ]
                    }
                  ]
                },{
                  title: '空气质量指数AQI',
                  dataIndex: 'aqi',
                  key: 'aqi',
                  render: (text, record, index) => this.renderColumns(dataSource, index, 'aqi', text),
                },{
                  title: '首要污染物',
                  dataIndex: 'primaryPollutant',
                  key: 'primaryPollutant',
                  render: (text, record, index) => this.renderPrimaryPollutant(record, index, 'primaryPollutant', text),
                },{
                  title: '空气质量指数级别',
                  dataIndex: 'aqi',
                  key: 'grade',
                  render: (text, record, index) => {
                    if(record.aqi<=0){
                      return (<span>—</span>)
                    }
                    if(text<=50){
                      return <Badge status="default" text="一级" />
                    }else if(51<=text&&text<=100){
                      return <Badge status="success" text="二级" />
                    }else if(101<=text&&text<=150){
                      return <Badge status="error" text="三级" />
                    }else if(151<=text&&text<=200){
                      return <Badge status="error" text="四级" />
                    }else if(201<=text&&text<=300){
                      return <Badge status="error" text="五级" />
                    }else if (text>301){
                      return <Badge status="error" text="六级" />
                    }
                  },
                },{
                  title: '空气质量指数类别',
                  dataIndex: 'aqi',
                  key: 'category',
                  render: (text, record, index) => {
                    if(record.aqi<=0){
                      return (<span>—</span>)
                    }
                    if(text<=50){
                      return <Badge status="default" text="优" />
                    }else if(51<=text&&text<=100){
                      return <Badge status="success" text="良" />
                    }else if(101<=text&&text<=150){
                      return <Badge status="error" text="轻度污染" />
                    }else if(151<=text&&text<=200){
                      return <Badge status="error" text="中度污染" />
                    }else if(201<=text&&text<=300){
                      return <Badge status="error" text="重度污染" />
                    }else if (text>301){
                      return <Badge status="error" text="严重污染" />
                    }
                  },
                }
              ];
    }else if (activeMenu=="tvstation"){
      columns = [
              {
                title: '站点',
                dataIndex: 'stationName',
                key: 'stationName'
              },{
                title: '监测时间',
                dataIndex: 'timepoint',
                key: 'timepoint'
              },{
                title: '描述',
                dataIndex: 'aqi',
                key: 'aqi',
                render: (text, record, index) => {
                  if(text<=50){
                    return <Badge status="default" text="空气质量指数(AQI)<50,空气质量级别:一级,空气质量状况:优,首要污染物:细颗粒物(PM2.5),对健康影响:舒适" />
                  }else if(51<=text&&text<=100){
                    return <Badge status="success" text="空气质量指数(AQI)<100,空气质量级别:二级,空气质量状况:良,首要污染物:颗粒物(PM10),对健康影响:正常" />
                  }else if(101<=text&&text<=150){
                    return <Badge status="error" text="空气质量指数(AQI)<150,空气质量级别:三级,空气质量状况:轻度污染,首要污染物:细颗粒物(PM2.5),对健康影响:略感不适" />
                  }else if(151<=text&&text<=200){
                    return <Badge status="error" text="空气质量指数(AQI)<200,空气质量级别:四级,空气质量状况:中度污染,首要污染物:细颗粒物(PM2.5),对健康影响:有害健康" />
                  }else if(201<=text&&text<=300){
                    return <Badge status="error" text="空气质量指数(AQI)<300,空气质量级别:五级,空气质量状况:重度污染,首要污染物:细颗粒物(PM2.5),对健康影响:严重有害健康" />
                  }else if (text>301){
                    return <Badge status="error" text="空气质量指数(AQI)>300,空气质量级别:六级,空气质量状况:严重污染,首要污染物:细颗粒物(PM2.5),对健康影响:不要出门" />
                  }
                },
              }

      ]

    }else {
        columns = [
            {
              title: '站点',
              dataIndex: 'stationName',
              key: 'stationName'
            },{
              title: '监测时间',
              dataIndex: 'timepoint',
              key: 'timepoint'
            },{
              title: 'AQI',
              dataIndex: 'aqi',
              key: 'aqi',
              render: (text, record, index) => this.renderColumns(dataSource, index, 'aqi', text),
            },{
              title: '首要污染物',
              dataIndex: 'primaryPollutant',
              key: 'primaryPollutant',
              render: (text, record, index) => this.renderPrimaryPollutant(dataSource, index, 'primaryPollutant', text),
            },{
              title: '空气质量指数级别',
              dataIndex: 'aqi',
              key: 'grade',
              render: (text, record, index) => {
                if(text<=50){
                  return <Badge status="default" text="一级" />
                }else if(51<=text&&text<=100){
                  return <Badge status="success" text="二级" />
                }else if(101<=text&&text<=150){
                  return <Badge status="error" text="三级" />
                }else if(151<=text&&text<=200){
                  return <Badge status="error" text="四级" />
                }else if(201<=text&&text<=300){
                  return <Badge status="error" text="五级" />
                }else if (text>301){
                  return <Badge status="error" text="六级" />
                }
              },
            },{
              title: '空气质量状态',
              dataIndex: 'aqi',
              key: 'category',
              render: (text, record, index) => {
                if(text<=50){
                  return <Badge status="default" text="优" />
                }else if(51<=text&&text<=100){
                  return <Badge status="success" text="良" />
                }else if(101<=text&&text<=150){
                  return <Badge status="error" text="轻度污染" />
                }else if(151<=text&&text<=200){
                  return <Badge status="error" text="重度污染" />
                }else if(201<=text&&text<=300){
                  return <Badge status="error" text="重度污染" />
                }else if (text>301){
                  return <Badge status="error" text="严重污染" />
                }
              },
            },{
            title: '对健康的影响',
            dataIndex: 'aqi',
            key: 'health',
            render: (text, record, index) => {
              if(text<=50){
                return <Badge status="default" text="舒适" />
              }else if(51<=text&&text<=100){
                return <Badge status="success" text="正常" />
              }else if(101<=text&&text<=150){
                return <Badge status="error" text="略感不适" />
              }else if(151<=text&&text<=200){
                return <Badge status="error" text="出门戴口罩" />
              }else if(201<=text&&text<=300){
                return <Badge status="error" text="不宜出门" />
              }else if (text>301){
                return <Badge status="error" text="不宜出门" />
              }
            },
            }
        ];




    }

    const self = this;
    return <div>
               <RangePicker
                defaultValue={[moment(startTime==undefined?new Date():startTime, dateFormat), moment(endTime==undefined?new Date():endTime, dateFormat)]}
                format={dateFormat} onChange={this.handleChange.bind(this)} />
                <Row gutter={24} className={styles.title}>
                  <Radio.Group value={activeMenu} onChange={this.handleMenuChange}>
                    <Radio.Button value="aqi">AQI日报</Radio.Button>
                    <Radio.Button value="tvstation">电视台</Radio.Button>
                    <Radio.Button value="province">省厅</Radio.Button>
                  </Radio.Group>
                </Row>
                <div id="table">
              <Table bordered columns={columns} dataSource={dataSource} loading={loading} pagination={false} simple rowKey={record => record.id} />
           </div>
           </div>
  }
}

export default list
